<!--
 * @Description: 
 * @Author: 呆龙
 * @Date: 2023-09-12 16:38:35
 * @LastEditTime: 2023-09-18 13:06:20
 * @LastEditors: 呆龙
-->
<template>
  <!-- vue3页面 -->
  <a-card>
    <a-select v-model:value="edition" style="width: 200px">
      <a-select-option value="第九届第四次">第九届第四次</a-select-option>
      <a-select-option value="第九届第五次">第九届第五次</a-select-option>
    </a-select>
    <a-input v-model:value="searchText" style="width: 300px; margin: 0 40px">
      <template #addonBefore>
        <a-select v-model:value="searchRule" style="width: 90px">
          <a-select-option value="姓名">姓名</a-select-option>
          <a-select-option value="工号">工号</a-select-option>
        </a-select>
      </template></a-input
    >
    <a-button type="primary">搜索</a-button>
    <a-button type="primary" style="float: right" @click="showModel = true"
      >+ 设置委员</a-button
    >
  </a-card>
  <a-card>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
    >
      <!-- <template #bodyCell="{ record, column }">
        <div v-if="column.dataIndex === 'action'">
          <a-dropdown>
            <template #overlay>
              <a-menu>
                <a-menu-item key="1">删除</a-menu-item>
                <a-menu-item
                  key="2"
                  v-if="record.identity !== 3"
                  @click="changeUserIdentity(record.id, 3)"
                >
                  <span class="identity">设置主任</span>
                </a-menu-item>
                <a-menu-item
                  key="3"
                  v-if="record.identity !== 2"
                  @click="changeUserIdentity(record.id, 2)"
                >
                  <span class="identity">设置副主任</span>
                </a-menu-item>
                <a-menu-item
                  key="4"
                  v-if="record.identity !== 1"
                  @click="changeUserIdentity(record.id, 1)"
                >
                  <span class="identity">设置委员</span>
                </a-menu-item>
              </a-menu>
            </template>
            <a-button>
              <setting-outlined />
              <DownOutlined />
            </a-button>
          </a-dropdown>
        </div>
      </template> -->
    </a-table>
  </a-card>
  <a-modal
    v-model:visible="showModel"
    :width="700"
    title="设置委员"
    @ok="setCommitteeMember"
  >
    <a-form
      ref="CommitteeMemberFrom"
      :model="formState"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
    >
      <a-form-item label="届次" name="number">
        <a-input v-model:value="formState.number" disabled />
      </a-form-item>

      <a-form-item label="工号或姓名" name="workNoOrName">
        <a-select
          v-model:value="formState.workNoOrName"
          show-search
          placeholder="请输入工号或姓名关键字"
          :options="memberList"
          :fieldNames="{ label: 'workNoOrName', value: 'id' }"
          :filter-option="filterOption"
          @select="handleChange"
        ></a-select>
      </a-form-item>
      <a-form-item label="联系方式" name="mobile">
        <a-input v-model:value="formState.mobile" disabled />
      </a-form-item>
      <a-form-item label="所属单位" name="unit">
        <a-input v-model:value="formState.unit" disabled />
      </a-form-item>
      <a-form-item label="身份" name="identity">
        <a-radio-group v-model:value="formState.identity" button-style="solid">
          <a-radio-button :value="1">委员</a-radio-button>
          <a-radio-button :value="2">副主任</a-radio-button>
          <a-radio-button :value="3">主任</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item> </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, onMounted, createVNode, reactive } from "vue";
import { getSessionUser } from "@/api/teachers";
import { FormInstance, PaginationProps, message, Button ,Tag} from "ant-design-vue";
onMounted(() => {
  getSessionData(1, 10);
});
const edition = ref("第九届第四次");
/**
 * 根据规则搜索功能
 */
const searchText = ref("");
const searchRule = ref("姓名");
/**
 * 表格的功能
 * dataSource 表格的数据
 * getSessionData 根据页数和页大小获取数据
 * changeUserIdentity 点击操作按钮栏里面的设为某个身份后触发的事件 id identity=身份代码
 * pagination 分页的配置
 */
const dataSource = ref([]);
const getSessionData = (page: number, size: number) => {
  getSessionUser(page, size).then((res: any) => {
    console.log(res);
    dataSource.value = res.userList;
    memberList.value = res.userList.map((item: any) => {
      return {
        id: item.id,
        workNoOrName: `${item.name}(${item.workNo})`,
        mobile: item.mobile,
        unit: item.unit,
      };
    });
    console.log(memberList.value);
  });
};
const changeUserIdentity = (id: string, identity: number) => {
  console.log(id, identity);
};
const pagination = ref<PaginationProps>({
  current: 1,
  pageSize: 10,
  total: 100,
  onChange: (page: number) => {
    pagination.value.current = page;
    getSessionData(page, pagination.value.pageSize!);
  },
});
const columns = [
  {
    title: "序号",
    customRender: ({ index }: any) => {
      return index + 1;
    },
    align: "center",
  },
  {
    title: "工号",
    dataIndex: "workNo",
    align: "center",
  },
  {
    title: "姓名",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "性别",
    dataIndex: "sex",
    align: "center",
    customRender: ({ text }: any) => {
      return text === 1 ? "男" : "女";
    },
  },
  {
    title: "手机",
    dataIndex: "mobile",
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "unit",
    align: "center",
  },
  {
    title: "届次",
    dataIndex: "number",
    align: "center",
  },
  {
    title: "身份",
    dataIndex: "identity",
    align: "center",
    customRender: ({ text }: any) => {
      return createVNode(
        Tag,
        {
          color:'blue'
        },
        text > 2 ? "主任" : text === 2 ? "副主任" : "委员"
      );
    },
  },
  {
    title: "设置身份操作",
    dataIndex: "action",
    align: "center",
    width: 100,
    customRender: ({ record }: any) => {
      return createVNode(
        "div",
        {
          style: {
            display: "flex",
            justifyContent: "space-between",
          },
        },
        ["设置为委员", "设为副主任", "设置为主任"].map(
          (item: string, index: number) => {
            if (record.identity === index + 1) return;
            return createVNode(
              Button,
              {
                type: "link",
                size: "small",
                onClick: () => {
                  changeUserIdentity(record.id, index + 1);
                },
              },
              () => item
            );
          }
        )
        // createVNode(
        //   Button,
        //   {
        //     type: "link",
        //     size: "small",
        //     onClick: () => {
        //       changeUserIdentity(record.id, 3);
        //     },
        //   },
        //   () => "设为主任"
        // ),
        // createVNode(
        //   Button,
        //   {
        //     type: "link",
        //     size: "small",
        //     onClick: () => {
        //       changeUserIdentity(record.id, 2);

        //     },
        //   },
        //   () => "设为副主任"
        // ),
        // createVNode(
        //   Button,
        //   {
        //     type: "link",
        //     size: "small",
        //     onClick: () => {
        //       changeUserIdentity(record.id, 1);
        //     },
        //   },
        //   () => "设为委员"
        // ),
      );
    },
  },
];
/**
 * 设置委员功能
 * showModel 是否显示model框
 * memberList 可以设置成委员的用户列表
 * formState 表单数据
 * setCommitteeMember 点击确定后的事件 判断是否已选择
 * filterOption 根据工号或名字筛选用户数据
 * handleChange 选择用户后的事件 并把表单数据保存下来
 */

const showModel = ref(false);
const memberList = ref<any[]>([]);
const CommitteeMemberFrom = ref<FormInstance>();
const formState = reactive({
  id: null,
  number: "第九届第四次",
  workNoOrName: null,
  mobile: "",
  unit: "",
  identity: 1,
});
const setCommitteeMember = () => {
  if (!formState.workNoOrName) {
    message.warning("请先选择用户!");
  }

  CommitteeMemberFrom.value?.resetFields();
  message.success("设置成功!");
  console.log(formState);
};
const filterOption = (input: string, option: any) => {
  return option.workNoOrName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const handleChange = (_: string, option: any) => {
  formState.id = option.id;
  formState.mobile = option.mobile;
  formState.unit = option.unit;
};
</script>

<style scoped lang="less">
:deep(.ant-card-body) {
  padding: 20px;
}
:deep(.identity) {
  color: #1890ff;
}
</style>
